<template>
  <Row>
    <Col span="12" style="padding-right:10px">
      <Select
        v-model="model17"
        filterable
        allow-create
        clearable
        @on-create="handleCreate1"
        @click="handleCreate1"
      >
        <Option
          v-for="item in cityList3"
          @on-create="handleCreate1"
          :value="item.value"
          :key="item.value"
        >{{ item.label }}
        <!-- <template slot-scope="scope"> -->
          <Icon type="ios-checkmark" style="float:right" @click="getRemove(item.label)" />
          <!-- </template> -->
        </Option>
      </Select>
    </Col>
    <!-- <Col span="12">
      <Select v-model="model18" filterable multiple allow-create @on-create="handleCreate2">
        <Option v-for="item in cityList4" :value="item.value" :key="item.value">{{ item.label }}</Option>
      </Select>
    </Col> -->
     <i class="ivu-icon ivu-icon-ios-checkmark"></i>
  </Row>
    <!-- <Circle :percent="80">
      <span class="demo-Circle-inner" style="font-size:24px">80%</span>
    </Circle>
    <Circle :percent="100" stroke-color=item"#5cb85c">
      <Icon type="ios-checkmark" size="60" style="color:#5cb85c"></Icon>
    </Circle>
    <Circle :percent="35" stroke-color="#ff5500">
      <span class="demo-Circle-inner">
        <Icon type="ios-close" size="50" style="color:#ff5500"></Icon>
      </span>
    </Circle> -->
</template>

<script>
export default {
  data() {
    return {
      cityList3: [
        {
          value: "New York",
          label: "New York"
        },
        {
          value: "Canberra",
          label: "Canberra"
        }
      ],
      cityList4: [
        {
          value: "Paris",
          label: "Paris"
        },
        {
          value: "Canberra",
          label: "Canberra"
        }
      ],
      model17: "",
      model107: "",
      model18: []
    };
  },
  methods: {
    handleCreate1(val) {
      this.cityList3.push({
        value: val,
        label: val
      });
      console.log(val);
      console.log("ok");
    },
    handleCreate2(val) {
      this.cityList4.push({
        value: val,
        label: val
      });
      console.log(val);
    },
    getRemove(val) {
      console.log(val)
      var that=this
      this.cityList3.forEach(function(item,index){
        if(item.label==val) {
          // return index
          that.cityList3.splice(index,1)
        }
      })
    }
  }
};
</script>
